<template>
    <SkeletonUser v-if="skeletonLoading" />
    <view v-else class="page_user tabbar_padding_b">
        <view
            class="container_heard"
            :style="{
                background: bgUrl
            }">
            <NavBar title="我的" bgColor="rgba(0,0,0,0)" />
            <view class="heard_item">
                <block>
                    <view class="change-mes">
                        <view style="display: flex">
                            <view v-if="hasTokenStorage">
                                <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar_black">
                                    <image
                                        class="portrait_img"
                                        v-if="Data.personalMes.avatar"
                                        :src="Data.personalMes.avatar"></image>
                                    <image
                                        v-else
                                        class="portrait_img"
                                        :src="getImgOssUrl('/ui-prod-2.7.0/avatar.png')"></image>
                                </button>
                            </view>
                            <view v-else @click="router.push('/pages-user/login/index')">
                                <image class="portrait_img" :src="getImgOssUrl('/ui-prod-2.7.0/avatar.png')"></image>
                            </view>
                            <view class="nickname-container">
                                <view class="heard_nickname" v-if="hasTokenStorage">
                                    {{
                                        Data.personalMes.nickname ||
                                        '微信用户' + String(Data.personalMes.mobile || '')?.substr(-4)
                                    }}
                                </view>
                                <view v-else class="heard_nickname" @click="router.push('/pages-user/login/index')">
                                    请登录
                                </view>
                                <view
                                    v-if="Data.level === 1 && levelName"
                                    @click="router.push('/pages-user/member/index')"
                                    class="membership-level-content">
                                    <image
                                        :src="getImgOssUrl('/ui-prod-2.4.0/member-identification.png')"
                                        class="membership-level" />
                                    <text class="text">{{ levelName }}</text>
                                </view>
                            </view>
                        </view>
                        <view @click="goToPersonalMes" class="img-container">
                            <image
                                :src="getImgOssUrl('/ui-prod-2.3.0/right_arrow_white@2x.png')"
                                class="link_icon"></image>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view class="container_middle">
            <view class="container_item integral-coupon">
                <view @click="toBalance" class="integral-left">
                    <view class="num">{{ floatDivide(Data.balance, 100) || 0 }}</view>
                    <view class="name">余额</view>
                </view>
                <view class="line"></view>
                <view @click="toIntegralMall" class="coupon-right">
                    <view class="num">{{ floatDivide(Data.personalMes.availablePoints, 100) || 0 }}</view>
                    <view class="name">积分</view>
                </view>
                <view class="line"></view>
                <view @click="jumpToCoupon" class="coupon-right">
                    <view class="num">{{ Data.personalMes.expireTotalCouponCount || 0 }}</view>
                    <view class="name">优惠券</view>
                </view>
            </view>
            <view class="container_item">
                <view class="order_row">
                    <view>我的订单</view>
                    <view @click="jump(0)">
                        <view class="link_item">更多</view>
                        <image class="link_icon" :src="getImgOssUrl('/ui-prod-2.0.0/rightarrow1.1.png')"></image>
                    </view>
                </view>
                <view class="order_row">
                    <view v-for="e in orderStatusOption" :key="e.status" @click="jump(e.status)">
                        <uni-badge
                            size="small"
                            :text="e.number"
                            absolute="rightTop"
                            :customStyle="{ background: '#FE292B' }">
                            <image class="row_icon" :src="e.imgUrl"></image>
                        </uni-badge>
                        <view>{{ e.name }}</view>
                    </view>
                </view>
            </view>
            <view class="container_item">
                <view class="order_row">
                    <view>常用功能</view>
                </view>
                <view class="my-ability-list">
                    <view v-if="showGroupPay" @click="jumpToScrabbleDough" class="my-ability">
                        <image :src="getImgOssUrl('/ui-prod-2.4.0/group-my-icon.png')" class="ability-icon"></image>
                        <view class="ability-text">我的拼团</view>
                    </view>
                    <view @click="jumpToMyAddress" class="my-ability">
                        <image :src="getImgOssUrl('/ui-prod-2.4.0/addr-my-icon.png')" class="ability-icon"></image>
                        <view class="ability-text">地址管理</view>
                    </view>
                    <view @click="jumpToHelper" class="my-ability" v-if="showIconVisible">
                        <image :src="getImgOssUrl('/ui-prod-2.9.0/icon-helper.png')" class="ability-icon"></image>
                        <view class="ability-text">员工助手</view>
                    </view>
                    <view @click="jumpToMyDistributi" class="my-ability" v-if="Data.distributiData.dtbSwitch == 1">
                        <image :src="getImgOssUrl('/ui-prod-2.8.0/distributi%402x.png')" class="ability-icon"></image>
                        <view class="ability-text">{{ Data.distributiData.distributerTitle }}</view>
                    </view>
                    <view @click="handleSharePopup" class="my-ability">
                        <image :src="getImgOssUrl('/ui-prod-2.12.0/share_shop_icon.png')" class="ability-icon"></image>
                        <view class="ability-text">分享店铺</view>
                    </view>
                    <view @click="jumpToTest" class="my-ability" v-if="currentEnv !== 'production'">
                        <image :src="getImgOssUrl('/ui-prod-2.4.0/addr-my-icon.png')" class="ability-icon"></image>
                        <view class="ability-text">开发调试</view>
                    </view>
                </view>
            </view>
            <!-- <view v-show="hasTokenStorage" class="container_item text-center" @click="logoutHandler">
                <view>退出登录</view>
            </view> -->
            <view class="float-box">
                <customerServiceFloat v-if="showServiceFloat" />
            </view>
        </view>
        <Loading />
    </view>
    <uni-popup ref="popupTestRef" type="center" :mask-click="false">
        <view class="popup-test">
            <input class="uni-input" placeholder="请输入链接" v-model="testLink" />
            <view class="btn-group">
                <view class="btn close" @click="confirmTestHandler">
                    <text class="text close-text">关闭</text>
                </view>
                <view class="btn" @click="confirmTestHandler">
                    <text class="text">确认</text>
                </view>
            </view>
        </view>
    </uni-popup>
    <TabBar url="/pages/tabbar/user" />
    <SharePopup ref="sharePopupRef" :shareAppMessage="shareAppMessage"></SharePopup>
    <!-- 隐私监听 -->
    <el-privacy-listener-popup :is-handle-tab-bar="false"></el-privacy-listener-popup>
</template>
<script setup>
import SkeletonUser from '@/components/skeletonUser';
import TabBar from '@/components/tabBar';
import NavBar from '@/components/navBar';
import Loading from '@/components/el-loading';
import customerServiceFloat from '@/components/customerServiceFloat';
import store from '@/store';
import storage from '@/commons/storage';
import router from '@/router';
import { ref, reactive, nextTick, computed } from 'vue';
import { onShow, onShareAppMessage } from '@dcloudio/uni-app';
import request from '@/request';
import { checkToken, getImgOssUrl, floatDivide, getCurrentPage } from '@/commons/utils';
import subscribe from '@/commons/subscribe';
import { getUrlParam } from '@/hooks';
import SharePopup from '@/components/sharePopup';

const currentEnv = store.useEnvStore().currentEnv;

const popupTestRef = ref(null);
const skeletonLoading = ref(true);
const bgUrl = ref(`url(${getImgOssUrl('/ui-prod-2.0.0/bg_1.1.png')})`);

let hasTokenStorage = ref(false);
let testLink = ref('');
const showServiceFloat = ref(false);
const levelName = ref('注册会员');
const showGroupPay = ref(false);
const orderStore = store.useOrderStore();
const Data = reactive({
    personalMes: {
        avatar: '',
        nickname: ''
    },
    level: '',
    integralConfig: {},
    type: 0,
    balance: 0, //余额
    distributiData: { dtbSwitch: '', distributerTitle: '' },
    distributiStatus: {
        dtbIdent: 1, //是不是分销员 1 否 2是
        auditStatus: '1', //审核状态 1待审核 2已通过 3已拒绝
        reason: '',
        qySwitch: 1,
        qyName: '',
        qyQrcode: '',
        status: '1', //账号启用状态 状态1 是启用 2 是禁用
        first: 1 //1是首次 2 非首次
    }
});
const orderStatusOption = reactive([
    {
        status: 1,
        name: '待付款',
        number: 0,
        imgUrl: getImgOssUrl('/ui-prod-2.0.0/wallet_1.1.png')
    },
    {
        status: 2,
        name: '待发货',
        number: 0,
        imgUrl: getImgOssUrl('/ui-prod-2.0.0/wait_1.1.png')
    },
    {
        status: 3,
        name: '待收货',
        number: 0,
        imgUrl: getImgOssUrl('/ui-prod-2.0.0/truck_1.1.png')
    },
    {
        status: 4,
        name: '交易完成',
        number: 0,
        imgUrl: getImgOssUrl('/ui-prod-2.0.0/success_1.1.png')
    },
    {
        status: 5,
        name: '售后',
        number: 0,
        imgUrl: getImgOssUrl('/ui-prod-2.0.0/$_1.1.png')
    }
]);

// const updateUserInfo = () => {
//     request('updateUserInfoServ', {avatar,nickname}).then(() => {});
// };

const onChooseAvatar = e => {
    const { avatarUrl } = e.detail;
    Data.personalMes.avatar = avatarUrl;
    let imgbase64 = 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(avatarUrl, 'base64');
    request('changeHead', { imageBase64: imgbase64 }).then(res => {
        request('saveMemberInfo', { avatar: res.data }).then(() => {
            storage.set('avatar', res.data);
        });
    });
};

const clearOrderNumber = () => {
    orderStatusOption.forEach(element => {
        element.number = 0;
    });
};

const jump = status => {
    router.push({
        path: '/pages-user/orderlist/index',
        query: {
            status: status
        }
    });
};

/**
 * 地址接口数据量过大 先进行地址信息缓存
 */
const addressList = () => {
    try {
        if (!Object.keys(orderStore.addressListLevel3).length) {
            request('regionServ', { level: 3 }).then(res => {
                res.data.shift();
                orderStore.addressListLevel3 = res.data;
            });
        }
        if (!Object.keys(orderStore.addressListLevel4).length) {
            request('regionServ', { level: 4 }).then(res => {
                res.data.shift();
                orderStore.addressListLevel4 = res.data;
            });
        }
    } catch (e) {}
};

/* 获取订单信息 */
const queryOrderNumber = async res => {
    // 待付款
    orderStatusOption[0].number = res.data.payoff || 0;
    // 待发货
    orderStatusOption[1].number = res.data.waitDeliver || 0;
    // 待收货
    orderStatusOption[2].number = res.data.stayTakeOver || 0;
    // 售后中
    orderStatusOption[4].number = res.data.inSales || 0;
};
/* 获取拼团订单列表 */
const getGoodsList = async res => {
    showGroupPay.value = res.data?.list?.length > 0;
};
/* 获取会员信息 */
const getMemberInfo = res => {
    Data.personalMes = res.data;
    storage.set('avatar', res?.data?.avatar);
    storage.set('nickname', res?.data?.nickname);
};
// 获取余额

const getBalance = res => {
    Data.balance = res.data.balance;
};
const getIntegralConfig = async () => {
    const res = await request('integralConfig', { shopId: storage.get('ZW_SHOP_ID') });
    Data.integralConfig = res.data;
};
const getMemberMine = async res => {
    Data.level = res.data;
    if (Data.level === 1) {
        try {
            const currentDetail = await request('management', { openKid: storage.get('openKid'), appType: 1 });
            levelName.value = currentDetail?.data?.level?.memberLevelName || '';
        } catch (error) {}
    }
    skeletonLoading.value = false;
};
const getAllData = async () => {
    let shopId = storage.get('ZW_SHOP_ID');
    const spellListParams = { page: 1, perPage: 10, status: 0 };
    let promiseArr = [
        request('orderCensusServ'),
        request('spellList', spellListParams),
        request('memberInfo'),
        request('getMemberMineServ', { app_type: 1 }),
        request('walletBalance')
    ];
    let fun = [queryOrderNumber, getGoodsList, getMemberInfo, getMemberMine, getBalance];
    const res = await Promise.allSettled(promiseArr);
    let isToast = false;
    res.forEach((item, index) => {
        if (item.status === 'fulfilled') {
            fun[index](item.value);
        } else {
            if (item.reason === 'other') skeletonLoading.value = false;
            if (!isToast) {
                isToast = true;
                const { msg } = item.reason.data;
                uni.showToast({
                    title: msg,
                    icon: 'none',
                    duration: 2000
                });
            }
            if (index === res.length - 1) {
                getMemberMine({});
            }
        }
    });
};

let showIconVisible = ref(false);

const jumpToHelper = () => {
    router.push('/pages-user/helper/index');
};

const hasHelper = async () => {
    const { data } = await request('isHelperShow');
    const { showIcon } = data || {};
    showIconVisible.value = showIcon;
};

const shareInfo = reactive({});
const getShareInfo = async () => {
    // 获取后台设置分享信息
    const { data } = await request('decorateServ', {
        pageCode: 'home',
        isPreview: 2,
        shopId: storage.get('ZW_SHOP_ID')
    });
    Object.assign(shareInfo, data || {});
};
const logoImg = ref();
const getLogo = async () => {
    // 获取小程序logo
    const { data } = await request('shopIdServ');
    logoImg.value = (data || {})?.tenantInfo?.logo;
};
// 打开分享
// 分享邀请
const sharePopupRef = ref();
let userId = ref(storage.get('userId'));
const shareAppMessage = computed(() => {
    const shopId = storage.get('ZW_SHOP_ID');
    // const currentRoutes =  ();
    // console.log(shopName, currentRoutes);
    // todo:活动中的页面，以及邀请人的id,shopId
    let data = {
        title: shareInfo?.shareTitle || '超多好物等你来享，快来一起逛逛吧~', // 分享名称或店铺名称
        path: `/pages/tabbar/home?shopId=${shopId}&inviteMemberId=${userId.value}`, // url + 原有参数
        imageUrl: shareInfo?.shareImg || logoImg?.value || getImgOssUrl('/ui-prod-2.0.0/errorImg.png') // todo:分享设置的图片如果没有就是logo图
    };
    return data;
});
const handleSharePopup = res => {
    sharePopupRef?.value?.handlePopup();
};

onShow(async () => {
    // skeletonLoading.value = true;
    userId.value = storage.get('userId');
    getIntegralConfig();
    hasCustomerService();
    addressList();
    getDistributi();
    getShareInfo();
    getLogo();
    hasTokenStorage.value = await checkToken();
    if (hasTokenStorage.value) {
        getAllData();
        hasHelper();
    } else {
        Data.personalMes.availablePoints = 0;
        Data.personalMes.expireTotalCouponCount = 0;
        Data.balance = 0;
        levelName.value = '';
        clearOrderNumber();
        skeletonLoading.value = false;
    }
});

const hasCustomerService = async () => {
    let res = await request('openServer');
    storage.set('openServerMes', JSON.stringify(res.data));
    showServiceFloat.value = res.data.personalCenter === 2;
};

const toIntegralMall = () => {
    const url =
        Data.integralConfig?.pointGoodsMail?.status === 1
            ? '/pages-user/myIntegral/shoppingMall'
            : '/pages-user/myIntegral/detail';
    router.push(url);
};
const toBalance = () => {
    router.push('/pages-user/balanceCash/balance/index');
};
const jumpToCoupon = async () => {
    const rcst = storage.get('receive_coupon_subscribe_time') || 0;
    const currentTimestamp = new Date().getTime();
    if (currentTimestamp - rcst >= 0) {
        await subscribe('mycoupon');
        const nextDay0Stamp = new Date(new Date().toLocaleDateString()).getTime() + 86400000;
        storage.set('receive_coupon_subscribe_time', nextDay0Stamp);
    }
    router.push('/pages-user/coupon/list/index');
};

const jumpToScrabbleDough = () => {
    router.push('/pages-user/scrabbleDough/list');
};
const jumpToMyAddress = () => {
    router.push('/pages-user/receiptAddress/list');
};

/**
 * 打开弹框
 */
const jumpToTest = () => {
    popupTestRef.value.open();
};

/**
 * 确认跳转
 */
const confirmTestHandler = () => {
    uni.navigateTo({
        url: testLink.value,
        complete: () => {
            const paramsArr = testLink.value.split('?');
            if (paramsArr[1]) {
                const params = getUrlParam(paramsArr[1]);
                if (params && params.shopId) {
                    storage.set('ZW_SHOP_ID', Number(params.shopId));
                }
            }
            testLink.value = '';
            popupTestRef.value.close();
        }
    });
};

/**
 * 关闭弹框
 */
const closeTestHandler = () => {
    popupTestRef.value.close();
};

const jumpToMyDistributi = () => {
    // ①不是分销员，则进入申请页面；
    // ②不是分销员，申请已提交（商家审核中），则进入审核中；
    // ③不是分销员，商家拒绝，进入商家拒绝的页面
    // ④审核通过后，“首次”进入  审核通过页面
    // ④审核通过后，“非首次”，则进入分销员中心
    request('dtbInfo').then(res => {
        Object.assign(Data.distributiStatus, res.data);
        if (Data.distributiStatus.dtbIdent == 1) {
            //不是分销员
            if (![1, 2, 3].includes(Data.distributiStatus.auditStatus)) {
                router.push('/pages-user/distributi/distributiApply/index');
            } else {
                let type = ['', 0, 1, 2];
                router.push(
                    '/pages-user/distributi/distributiApply/distributiStatus?type=' +
                        type[Data.distributiStatus.auditStatus]
                );
            }
        } else {
            // 审核通过成为分销员
            if (Data.distributiStatus.status == 1) {
                // 账号开启
                if (Data.distributiStatus.first == 1) {
                    router.push('/pages-user/distributi/distributiApply/distributiStatus?type=1');
                } else {
                    router.push('/pages-user/distributi/distributiCenter/index');
                }
            } else {
                // 账号禁用
                router.push('/pages-user/distributi/distributiApply/distributiStatus?type=3');
            }
        }
    });
};
const logoutHandler = () => {
    uni.showModal({
        content: '确认退出登录？',
        success: e => {
            if (e.confirm) {
                request('loginOutServ', { token: storage.get('token') }).then(res => {
                    storage.remove('token');
                    storage.remove('expireTime');
                    storage.remove('userId');
                    storage.remove('openKid');
                    Data.personalMes.availablePoints = 0;
                    Data.balance = 0;
                    Data.personalMes.expireTotalCouponCount = 0;
                    Data.personalMes.avatar = '';
                    Data.personalMes.nickname = '';
                    levelName.value = '';
                    hasTokenStorage.value = false;
                    clearOrderNumber();
                });
            }
        }
    });
};

const goToPersonalMes = () => {
    router.push('/pages-cart/personalMes/index');
};
// 获取分销员模块的信息
const getDistributi = () => {
    request('dtbIdent').then(res => {
        Object.assign(Data.distributiData, res.data);
        storage.set('dtbName', Data.distributiData.distributerTitle);
    });
};
</script>
<style lang="scss" scoped>
.page_user {
    position: relative;
    .text-center {
        text-align: center;
    }
    .link_icon {
        width: 11rpx;
        height: 20rpx;
    }
    .container_heard {
        background-origin: border-box;
        background-size: cover;
        height: 400rpx;
        :deep(.nav-bar-main) {
            .nav-bar-content {
                background: none;
                .nav-bar-title {
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                }
            }
        }

        .heard_item {
            display: flex;
            margin-top: 30rpx;
            .avatar_black {
                background: none;
                height: 110rpx;
                margin: 0;
                padding: 0;
                border-radius: 0;
            }
            .portrait_img {
                margin: 0 22rpx 0 30rpx;
                border-radius: 50%;
                width: 110rpx;
                height: 110rpx;
                padding: 0;
                -webkit-transform: translateZ(0);
                -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
                image {
                    width: 110rpx;
                    height: 110rpx;
                }
            }
            .change-mes {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .img-container {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    width: 100rpx;
                    height: 100rpx;
                }
                .link_icon {
                    width: 11rpx;
                    height: 20rpx;
                    margin-right: 30rpx;
                }
            }
            .nickname-container {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                .heard_nickname {
                    font-size: 32rpx;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #ffffff;
                    overflow: hidden;
                    white-space: nowarp;
                    text-overflow: ellipsis;
                    max-width: 600rpx;
                    min-width: 120rpx;
                }
                .membership-level-content {
                    display: flex;
                    align-items: center;
                    height: 40rpx;
                    background: linear-gradient(270deg, #ffac2b 0%, #ffd592 100%);
                    border-radius: 18rpx;
                    font-size: 22rpx;
                    color: #ffffff;
                    width: fit-content;
                    .membership-level {
                        width: 36rpx;
                        height: 40rpx;
                    }
                    .text {
                        margin-right: 7rpx;
                    }
                }
            }
        }
    }
    .container_middle {
        position: absolute;
        width: 690rpx;
        top: 330rpx;
        left: 30rpx;
        .float-box {
            width: 100rpx;
            height: 100rpx;
            overflow: hidden;
        }
        .container_item {
            background: #ffffff;
            border-radius: 8px;
            padding: 30rpx;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #333333;
            &:nth-child(n + 2) {
                margin-top: 18rpx;
            }
            &.jump {
                display: flex;
                justify-content: space-between;
            }
            .order_row {
                display: flex;
                justify-content: space-between;
                text-align: center;
                font-size: 25rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                line-height: 36rpx;
                &:nth-child(1) {
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    font-size: 29rpx;
                    align-items: 'flex-end';
                    margin-bottom: 30rpx;
                }
                .row_icon {
                    width: 44rpx;
                    height: 44rpx;
                }
                .link_item {
                    font-size: 25rpx;
                    color: #999999;
                    display: inline-block;
                    margin-right: 11rpx;
                }
            }
            .mb0 {
                margin-bottom: 0rpx !important;
            }
            .integral-left {
                width: 345rpx;
                text-align: center;
            }
            .line {
                width: 2rpx;
                height: 54rpx;
                background: #e2e2e2;
            }
            .coupon-right {
                width: 345rpx;
                text-align: center;
            }
            .my-ability-list {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                row-gap: 36rpx;
                column-gap: 50rpx;
                .my-ability {
                    display: flex;
                    flex-direction: column;
                    flex-shrink: 0;
                    align-items: center;
                    .ability-icon {
                        width: 58rpx;
                        height: 58rpx;
                        margin-bottom: 18rpx;
                    }
                    .ability-text {
                        min-width: max-content;
                        font-size: 25rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        line-height: 25rpx;
                    }
                }
            }
        }
        .integral-coupon {
            display: flex;
            align-items: center;
            .num {
                font-size: 36rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 36rpx;
                margin-bottom: 18rpx;
            }
            .name {
                font-size: 25rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 25rpx;
            }
        }
    }
}

.popup-test {
    width: 690rpx;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20rpx;
    padding: 60rpx;
    box-sizing: border-box;

    .uni-input {
        width: 100%;
        border: 1rpx solid #ccc;
        height: 40rpx;
        border-radius: 10rpx;
        padding: 10rpx;
    }

    .btn-group {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;

        .btn {
            width: 240rpx;
            height: 80rpx;
            background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
            border-radius: 36rpx;
            margin-top: 60rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .text {
                font-size: 30rpx;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
        }

        .close {
            background: #fff;
            border: 1rpx solid #f1f1f1;
            .close-text {
                color: #333;
            }
        }
    }
}
</style>
